﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="bootplus/css/bootplus.min.css" rel="stylesheet" media="screen" />
    <link href="bootplus/css/bootplus-responsive.min.css" rel="stylesheet" media="screen" />
    <link href="bootplus/css/bootstrap-progressbar-3.1.1.css" rel="stylesheet" media="screen"/>
    <!--[if IE 7]>
        <link rel="stylesheet" href="bootplus/css/bootplus-ie7.min.css">
    <![endif]-->
    <!--<style>
        .card {
            padding-top: 10px;
            margin: 10px 0 20px 0;
            background-color: #ffffff;
            border: 1px solid #d8d8d8;
            border-top-width: 0;
            border-bottom-width: 2px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .card .card-heading {
            padding: 0 20px;
            margin: 0;
        }

        .card .card-heading.simple {
            font-size: 20px;
            font-weight: 200;
            color: #777;
            border-bottom: 1px solid #e5e5e5;
        }

        .card .card-body {
            padding: 0 10px;
            margin-top: 10px;
        }

        .span4 {
            width: 300px;
        }
        .auto-style1 {
            width: 187px;
            border-right: 1px solid #e5e5e5;
        }
    </style>-->
   <style>
       .progress .bar.six-sec-ease-in-out {
            -webkit-transition: width 10s ease-in-out;
            -moz-transition: width 10s ease-in-out;
            -ms-transition: width 10s ease-in-out;
            -o-transition: width 10s ease-in-out;
            transition: width 10s ease-in-out;
        }
   </style>
</head>
<body style="background-color:#e5e5e5">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="bootplus/js/bootstrap.min.js"></script>
    <script src="bootplus/js/bootstrap-progressbar.min.js"></script>
    <form id="form1" runat="server">
    <div class="progress progress-striped active">
        <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuetransitiongoal="100"></div>
    </div>
    <!--<div class="span4">
        <div class="card">
            <table>
            <tr>
                <td class="auto-style1">
           <img style="width:100%" src="images/avatar_2x.png" />
                    </td>
                <td>
            <h6 class="card-heading simple">@aadhavan</h6>
            <div class="card-body">
                <p>
                    Aadhavan Ramesh
                </p>
                <p>
                   aadhavanramesh@ufl.edu
                </p>
            </div>
                    </td>
            </tr>
            </table>
        </div>
    </div>
        <br />
        <br />
        -->
        <a id="first" href="#" title="First User" data-toggle="tooltip" data-animation="true" data-trigger="hover" data-placement="bottom">Hello</a>
        <div id="users" runat="server">
        <div class="row-fluid">
        <div class="card people">
            <div class="card-top green">
               
                <img src="images/silhouette_homer.png" alt="" />
                
            </div>
            <div class="card-info">
                <a class="title" href="#">Aadhavan Ramesh</a>
                <div class="desc">
                    Computer Science<br />aadhavanramesh@ufl.edu
                </div>
            </div> 
            <div class="card-bottom">
                    <asp:Button ID="Button1" CssClass="btn btn-block" runat="server" Text="Message"/>
            </div>
        </div>
        <div class="card people">
            <div class="card-top blue">
                <a href="#">
                <img src="images/silhouette_lisa.png" alt="" />
                </a>
            </div>
            <div class="card-info">
                <a class="title" href="#">Lisa</a>
                <div class="desc">
                    <p>Mathermatics</p>
                    <p>lisa@ufl.edu</p>
                </div>
            </div> 
            <div class="card-bottom">
                    <asp:Button CssClass="btn btn-block" runat="server" Text="Message"/>
            </div>
        </div>
        </div>
        </div>

    </form>
</body>
     <script type="text/javascript">
         $("a.btn.btn-block").click(function () {
             var value = $(this).attr("id");
             alert("Hello"+value);
         });

         $("#first").tooltip();
         $('.progress-bar').progressbar();
    </script>
</html>
